<template>
    <div class="banner">
        <img :class="customClass" :src="bannerUrl" width="100%" height="fit-content" />
        <div class="countdown-container">
            <div class="label-box">
                <span class="label-text">距报名结束</span>
            </div>
            <span class="countdown">{{ localEndTime }}</span>
        </div>
    </div>
</template>

<script>
import { countDown } from '@/utils/dateUtil';

export default {

    props: {
        bannerUrl: {
            type: String,
            default: '',
        },
        endTime: {
            type: String,
            default: '',
        },
        customClass: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            localEndTime: this.endTime,
        };
    },
    created() {
        this.timesDown();
        this.$watch('endTime', () => {
            this.localEndTime = this.endTime;
            this.timesDown();
        });
    },
    methods: {
        timesDown() {
            let timer;
            const timerFunc = () => {
                let timeObj = countDown(this.endTime);
                if (timeObj.totalSecond <= 0) {
                    this.localEndTime = '报名已结束';
                    clearTimeout(timer);
                    return;
                }
                this.localEndTime = `${timeObj.d}天${timeObj.h}时${timeObj.m}分${timeObj.s}秒`;
                timer = setTimeout(() => {
                    timerFunc();
                }, 1000);
            };
            timerFunc();
        },
    },
};
</script>

<style lang="less" scoped>
/* 简化后的版本 */
.banner {
    width: 100%;
    position: relative;

    .countdown-container {
        height: 150px;
        height: 56px;
        background: #222;
        display: flex;
        gap: 12px;

        .label-box {
            height: 100%;
            border-radius: 0px 16px 0px 0px;
            background: linear-gradient(180deg, #fbc55c 0%, #f46e22 36.3%, #ea5e0e 100%);
            width: 120px;
            height: 56px;
            padding: 4px 16px 8px 16px;
            box-sizing: border-box;

            .label-text {
                color: #fff;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
            }
        }

        .countdown {
            color: #fff;
            font-family: Roboto;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            margin-top: 8px;
        }
    }
}
</style>